import {View, Block} from '@tarojs/components'
import React, { useEffect, useState } from 'react';
import Taro from '@tarojs/taro';
import {AtIcon} from 'taro-ui'
import {TARO_ENV} from "../../constants/api";
import {isPc} from "../../utils/tools";
import './siteBox.scss';

interface Info {
  info: any
  goodsId: any
  category: any
}

const SiteBox: React.FC<Info> = (props: any) => {
  const [info, setInfo] = useState([{phone: '', name: '', address: ''}]);
  const [images, setImages] = useState([]);

  useEffect(() => {
    if (props.info) {
      if (process.env.TARO_ENV === 'tt') {
        const imgList: any = []
        props.info.map(item => {
          if (item.qualifications_imgs_list && item.qualifications_imgs_list.length > 0) {
            item.qualifications_imgs_list.map(items => items.url && imgList.push(items.url))
          }
        })
        setImages(imgList)
      }
      setInfo(props.info)
    }
  }, [props.info])

  const gotoShopListLimit = () => {
    Taro.navigateTo({url: '/common/limited/list?goodsId=' + props.goodsId + '&category=' + props.category})
  }

  const makePhone = () => {
    try {
      const phoneNumber = info[0].phone
      const isH5 = TARO_ENV === 'h5'
      if (isH5 && isPc()) {
        Taro.showModal({
          title: '商家电话',
          content: phoneNumber,
        })
        return false
      }
      Taro.makePhoneCall({
        phoneNumber: phoneNumber
      })
    } catch (e) {
      Taro.showToast({title: '拨打电话失败', icon: 'none'})
    }
  }

  const viewImages = () => {
    Taro.previewImage({
      current: images[0],
      urls: images
    })
  }

  return (
    <Block>
      {(info && info.length > 0) &&
        <View className='site site-top'>
          <View className='sites'>
            <View className='title'>适用门店</View>
            <View onClick={gotoShopListLimit}
              className='rt'
            >{info.length}家店适用 <AtIcon size='8px' prefixClass='car'
              value='iconright' color='#686868'
              customStyle='vertical-align: middle;'
            /></View>
          </View>
          <View className='site-bottom'>
            <View className='site-name'>
              <View className='platform-name'>{info[0].name}</View>
              <View className='location'><AtIcon className='icon' value='map-pin' size='12px' color='#3f3f3f'
                customStyle='margin-right: 3px'
              />{info[0].address}
              </View>
            </View>
            <View style='display: flex;align-items: center;'>
              {images.length > 0 && <View onClick={viewImages}>
                <AtIcon size={22} prefixClass='tabpole' value='icondailizizhizizhiqiyezizhi' color='#000' />
              </View>}
              <View onClick={makePhone}
                className='right-top-phone'
              ><AtIcon
                customStyle='font-size: 24px'
                className='icon' color='#000' value='icon icon-dianhua-01'
              /></View>
            </View>
          </View>
        </View>
      }
    </Block>
  )
}
export default SiteBox
